<template>
    <div class="game-tag-list" v-loading="loading">
        <div class="input-box">
            <el-input
                placeholder="请输入您要搜索的内容"
                @keyup.enter.native="getList(1)"
                clearable
                style="width:200px;"
                v-model.trim="keyword">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button type="primary" class="btn" @click="getList(1)">搜索</el-button>
            <el-button type="success" class="btn" @click="addNewTag">新建</el-button>
        </div>

        <div class="table-box">
            <el-table
                :data="list"
                :span-method="arraySpanMethod"
                border
                style="width: 100%">
                <el-table-column
                    width="80"
                    label="ID">
                    <template slot-scope="scope">
                        <div class="item-td">{{scope.row.id}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="80"
                    label="游戏标签">
                    <template slot-scope="scope">
                        <div class="item-td">{{scope.row.gameTags}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="90"
                    label="游戏类型">
                    <template slot-scope="scope">
                        <template v-if="scope.row.gameTagCategoryList && scope.row.gameTagCategoryList.length">
                            <div class="for-items" v-for="(item, index) in scope.row.gameTagCategoryList" :key="index">
                                <div class="items-column" style="width:90px;">{{item.categoryName || '-'}}</div>
                                <div class="items-column" style="flex:1">
                                    <div v-if="item.tagList && item.tagList.length">
                                        <span v-for="(tag, tagIndex) in item.tagList" :key="tagIndex" style="margin-right:10px;">{{tag}}</span>
                                    </div>
                                    <div v-else>-</div>
                                </div>
                                <div class="items-column" style="width:80px;">{{item.sort || '-'}}</div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="for-items">
                                <div class="items-column" style="width:90px;">-</div>
                                <div class="items-column" style="flex:1">-</div>
                                <div class="items-column" style="width:80px;">-</div>
                            </div>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column
                min-width="200"
                    label="同等级标签">
                </el-table-column>
                <el-table-column
                    width="80"
                    prop="sort"
                    label="排行榜标签顺序">
                </el-table-column>
                <el-table-column
                    width="80"
                    prop="gameCount"
                    sortable
                    label="关联游戏个数">
                    <template slot-scope="scope">
                        <div class="item-td">{{scope.row.gameCount || '-'}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="90"
                    label="来源">
                    <template slot-scope="scope">
                        <div class="item-td" v-if="scope.row.source === 0">运营上传</div>
                        <div class="item-td" v-else-if="scope.row.source === 1">用户上传</div>
                        <div class="item-td" v-else-if="scope.row.source === 2">taptap</div>
                        <div class="item-td" v-else-if="scope.row.source === 3">运营补充</div>
                        <div class="item-td" v-else-if="scope.row.source === 5">小米</div>
                        <div class="item-td" v-else>-</div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="80"
                    label="用户提交频次">
                    <template slot-scope="scope">
                        <div class="item-td">{{scope.row.submitCount || '-'}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="80"
                    fixed="right"
                    label="展示状态">
                    <template slot-scope="scope">
                        <div class="item-td" v-if="scope.row.status === 1">展示中</div>
                        <div class="item-td" v-else>-</div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="150"
                    fixed="right"
                    label="操作">
                    <template slot-scope="scope">
                        <div class="item-td">
                            <span class="table-btn" @click="editTag(scope.row)">编辑</span>
                            <span class="table-btn" v-if="scope.row.status === 1" style="color:red;" @click="updateSatus(scope.row, 0)">C端隐藏</span>
                            <span class="table-btn" v-else @click="updateSatus(scope.row, 1)">C端展示</span>
                            <span class="table-btn" @click="delTag(scope.row, -1)">删除</span>
                            <!-- <div><el-button  type="text" size="small">编辑</el-button></div> -->
                            <!-- <div><el-button @click="delType(scope.row.id, scope.$index)" type="text" size="small">上架</el-button></div>
                            <div><el-button @click="delType(scope.row.id, scope.$index)" type="text" size="small">上架</el-button></div>
                            <div><el-button @click="delType(scope.row.id, scope.$index)" type="text" size="small">C端隐藏</el-button></div> -->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <el-dialog
            :title="title"
            :visible.sync="showEdit"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="false"
            class="tag-editor-box"
            width="800px">
            <el-form
                :model="currentItem"
                :rules="rules"
                ref="ruleForm"
                hide-required-asterisk
                label-width="100px">
                <el-form-item label="游戏标签" prop="gameTags">
                    <el-input v-model.trim="currentItem.gameTags"></el-input>
                </el-form-item>
                <el-form-item label="客户端不展示">
                    <el-switch v-model="currentItem.status" :active-value="0" :inactive-value="1"></el-switch>
                </el-form-item>
            </el-form>

            <el-card class="box-card" shadow="never" v-for="(item, index) in currentItem.gameTagCategoryList" :key="index">
                <div class="card-flex">
                    <div class="card-left">
                        <div class="card-item">
                            <span class="card-item-title">关联类型</span>
                            <el-select v-model="item.categoryName" @change="itemTypeChange(item, $event)" placeholder="请选择排行榜顺序">
                                <el-option :disabled="typeItem.disabled" :label="typeItem.name" :value="typeItem.name" v-for="(typeItem, typeIndex) in typeList" :key="typeIndex"></el-option>
                            </el-select>
                        </div>
                        <div class="card-item">
                            <span class="card-item-title">同步至排行榜</span>
                            <el-switch v-model="item.synchronizeToRank"></el-switch>
                        </div>
                        <div class="card-item">
                            <span class="card-item-title">排行榜顺序</span>
                            <el-select clearable v-model="item.sort" placeholder="请选择排行榜顺序">
                                <el-option :label="sortValue + 1" :value="sortValue + 1" v-for="(sortLabel, sortValue) in item._sortList" :key="sortValue">
                                    <span style="float: left">{{ sortLabel }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ sortValue + 1 }}</span>
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="card-right">
                        <span class="right-btn" @click="delType(currentItem.gameTagCategoryList, index)">删 除</span>
                    </div>
                </div>
            </el-card>

            <el-button type="primary" @click="addNewTagType" style="width: 100%;" size="small" v-if="currentItem.gameTagCategoryList.length < typeList.length">添 加 关 联 类 型</el-button>

            <span slot="footer">
                <el-button @click="cancleSave">取 消</el-button>
                <el-button v-if="currentItem.id" type="primary" @click="saveTag">保 存</el-button>
                <el-button v-else type="success" @click="createTag">新 建</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
export default {
    data () {
        return {
            keyword: '', // 查询关键字
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            list: [], // 标签列表
            loading: false, // 查询加载loading
            rules: {
                gameTags: [
                    { required: true, message: '请输入游戏类型', trigger: 'blur' }
                ]
            },
            typeList: [],
            showEdit: false, // 是否显示编辑、创建标签弹窗
            title: '新建标签', // 编辑创建弹窗标题
            currentItem: {
                gameTagCategoryList: []
            } // 被编辑对象
        }
    },

    created () {
        this.getList(1)
        this.getTypeList()
    },

    methods: {
        // 获取标签列表
        async getList (num) {
            if (this.loading) return
            this.loading = true
            this.pageNum = num
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }

            if (this.keyword) {
                params.keyword = this.keyword
            }

            let res = await this.$http.get('/game/findGameTag', {
                params
            })
            if (res.code === '0') {
                this.list = res.data
                this.total = res.count
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        async getTypeList () {
            let res = await this.$http.post('/game/findGameCategories')
            this.typeList = res.data || []
        },

        // 新建标签
        addNewTag () {
            this.currentItem = {
                gameTagCategoryList: [], // 游戏类型 ,
                id: '', // id ,
                status: 0, // 展示状态 0 不展示,1 展示 -1删除 ,
                gameTags: '' // 标签 ,
            }
            this.showEdit = true
        },

        // 编辑标签
        editTag (item) {
            this.title = '编辑标签'
            if (item.gameTagCategoryList && item.gameTagCategoryList.length) {
                item.gameTagCategoryList.forEach(typeItem => {
                    if (typeItem.categoryName) {
                        for (let i = 0; i < this.typeList.length; i++) {
                            if (this.typeList[i].name === typeItem.categoryName) {
                                this.typeList[i].disabled = true
                                typeItem._sortList = this.typeList[i].adminGameTagList || []
                                break
                            }
                        }
                    } else {
                        typeItem._sortList = []
                    }
                })
            } else {
                item.gameTagCategoryList = []
            }
            this.currentItem = { ...item }
            this.showEdit = true
        },

        // 更改状态
        async updateSatus (item, status) {
            let res = await this.$http.post('/game/updateGameTagStatus', {
                tagId: item.id,
                status
            })
            if (res.code === '0') {
                if (status === -1) {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    this.getList(this.pageNum)
                } else {
                    item.status = status
                    this.$message({
                        type: 'success',
                        message: '修改成功'
                    })
                }
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 删除标签
        delTag (item, status) {
            this.$confirm('确定删除该标签?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.updateSatus(item, status)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },

        // 弹窗相关操作
        // 类型switch改变
        itemTypeChange (item, e) {
            item.sort = ''
            for (let i = 0; i < this.typeList.length; i++) {
                if (this.typeList[i].name === e) {
                    item._sortList = this.typeList[i].adminGameTagList || []
                }
            }
            this.typeList.forEach(typeItem => {
                typeItem.disabled = false
                this.currentItem.gameTagCategoryList.forEach(currentTypeItem => {
                    if (typeItem.name === currentTypeItem.categoryName) {
                        typeItem.disabled = true
                    }
                })
            })
        },

        // 添加关联类型
        addNewTagType () {
            this.currentItem.gameTagCategoryList.push({
                categoryName: '', // 类别名称
                sort: '', // 标签在分类下的顺序
                synchronizeToRank: false, // 是否同步至排行榜
                _sortList: []
            })
        },

        // 删除关联类型
        delType (item, index) {
            item.splice(index, 1)
        },

        // 取消保存
        cancleSave () {
            this.showEdit = false
        },

        // 保存标签
        saveTag () {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    let res = await this.$http.post('/game/updateGameTag', this.currentItem)
                    if (res.code === '0') {
                        this.$message({
                            type: 'success',
                            message: '新建成功'
                        })
                        this.showEdit = false
                        this.getList(this.pageNum)
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.desc
                        })
                    }
                } else {
                    return false
                }
            })
        },

        // 新建标签
        createTag () {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    let res = await this.$http.post('/game/createGameTag', this.currentItem)
                    if (res.code === '0') {
                        this.$message({
                            type: 'success',
                            message: '新建成功'
                        })
                        this.showEdit = false
                        this.getList(this.pageNum)
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.desc
                        })
                    }
                } else {
                    return false
                }
            })
        },

        // 页容切换
        sizeChange (val) {
            this.pageSize = val
            this.getList(1)
        },

        // 页码切换
        pageChange (val) {
            this.pageNum = val
            this.getList(this.pageNum)
        },

        // 合并单元格
        arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 2) {
                return [1, 3]
            } else if (columnIndex === 3 || columnIndex === 4) {
                return [0, 0]
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .game-tag-list {
        .input-box {
            .btn {
                margin-left: 10px;
            }
        }
        .table-box {
            margin-top: 10px;

            /deep/ td {
                padding: 0;
                .cell {
                    padding: 0;
                }
            }
            .item-td {
                padding: 12px 10px;
            }

            .for-items {
                display: flex;
                border-bottom: 1px solid #EBEEF5;
                &:last-child {
                    border: none;
                }
                .items-column {
                    padding: 12px 10px;
                    display: flex;
                    align-items: center;
                    border-right: 1px solid #EBEEF5;
                    &:last-child {
                        border: none;
                    }
                }
            }

            .table-btn {
                color: #409EFF;
                font-size: 12px;
                cursor: pointer;
                margin-right: 10px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                &:hover {
                    opacity: .8;
                }
            }
        }

        .tools {
            margin-top: 10px;
            padding-right: 0px;
            display: flex;
            justify-content: flex-end;
        }

        .tag-editor-box {
            /deep/ .el-dialog__body {
                padding: 0 20px;
            }
            .box-card {
                margin-bottom: 20px;
                /deep/ .el-card__body {
                    padding: 10px 0;
                }
                .card-flex {
                    display: flex;
                    align-items: center;
                    .card-left {
                        flex: 1;
                    }
                    .card-right {
                        width: 100px;
                        .right-btn {
                            color: #F56C6C;
                            cursor: pointer;
                            &:hover {
                                text-decoration: underline;
                            }
                        }
                    }
                }
                .card-item {
                    margin-bottom: 10px;
                    &:last-child {
                        margin: 0;
                    }
                    .card-item-title {
                        display: inline-block;
                        padding-right: 10px;
                        width: 100px;
                        text-align: right;
                        color: #606266;
                    }
                }
            }
        }
    }
</style>
